<template>
  <div class="wagesBox">
    <div class="wagesTitle">{{wageData.workerPosition}}</div>
    <div class="wagesMoney">+{{wageData.workRealWage}}元</div>
    <div class="wagesDetalBox" v-if='wageData.type == 1'>
      <div class="wagesDetalGroup">
        <span class="groupLeft">工资月份:</span>
        <span class="groupRight">{{wageData.workWageGrant}}天</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">出勤天数:</span>
        <span class="groupRight">{{wageData.workDay}}天</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">基本工资:</span>
        <span class="groupRight">{{wageData.workBasicWage}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">出勤奖金:</span>
        <span class="groupRight">{{wageData.workDayBonus}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">加班费:</span>
        <span class="groupRight">{{wageData.workOt}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">餐补:</span>
        <span class="groupRight">{{wageData.workMealBonus}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">小时单价:</span>
        <span class="groupRight">{{wageData.workHourPrice}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">小时总数:</span>
        <span class="groupRight">{{wageData.workHourCount}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">应发合计:</span>
        <span class="groupRight">{{wageData.workWage}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">预支款:</span>
        <span class="groupRight">{{wageData.workAdvance}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">缺勤天数:</span>
        <span class="groupRight">{{wageData.workWage}}天</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">缺勤扣款:</span>
        <span class="groupRight">{{wageData.workMisDeduct}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">水电费:</span>
        <span class="groupRight">{{wageData.workWaterAndElec}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">住宿费:</span>
        <span class="groupRight">{{wageData.workHotelExp}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">协议扣款:</span>
        <span class="groupRight">{{wageData.workAgrDeduct}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">社保扣款:</span>
        <span class="groupRight">{{wageData.workSocialDeduct}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">商业扣款:</span>
        <span class="groupRight">{{wageData.workBusinessDeduct}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">个税:</span>
        <span class="groupRight">{{wageData.workPersonalTax}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">其他扣款:</span>
        <span class="groupRight">{{wageData.workOtherDeduct}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">实发工资:</span>
        <span class="groupRight">{{wageData.workRealWage}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">工资备注:</span>
        <span class="groupRight">{{wageData.desc}}</span>
      </div>
    </div>
    <div class="wagesDetalBox" v-if='wageData.type == 2'>
      <div class="wagesDetalGroup">
        <span class="groupLeft">工资月份:</span>
        <span class="groupRight">{{wageData.workWageGrant}}天</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">班次:</span>
        <span class="groupRight">{{wageData.workShifts}}</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">应出勤天数:</span>
        <span class="groupRight">{{wageData.workThDay}}天</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">实际出勤天数:</span>
        <span class="groupRight">{{wageData.workDay}}天</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">工资单价:</span>
        <span class="groupRight">{{wageData.workPrice}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">应发合计:</span>
        <span class="groupRight">{{wageData.workWage}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">加班费:</span>
        <span class="groupRight">{{wageData.workOt}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">带班费:</span>
        <span class="groupRight">{{wageData.workDb}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">水电费:</span>
        <span class="groupRight">{{wageData.workWaterAndElec}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">商业扣款:</span>
        <span class="groupRight">{{wageData.workBusinessDeduct}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">预支款:</span>
        <span class="groupRight">{{wageData.workAdvance}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">个税:</span>
        <span class="groupRight">{{wageData.workPersonalTax}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">其他扣款:</span>
        <span class="groupRight">{{wageData.workOtherDeduct}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">实发工资:</span>
        <span class="groupRight">{{wageData.workRealWage}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">工资备注:</span>
        <span class="groupRight">{{wageData.desc}}</span>
      </div>
    </div>
    <div class="wagesDetalBox" v-if='wageData.type == 3'>
      <div class="wagesDetalGroup">
        <span class="groupLeft">工资月份:</span>
        <span class="groupRight">{{wageData.workWageGrant}}天</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">基本工资:</span>
        <span class="groupRight">{{wageData.workBasic}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">出勤天数:</span>
        <span class="groupRight">{{wageData.workDay}}天</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">社保补贴:</span>
        <span class="groupRight">{{wageData.workSocial}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">经济补贴:</span>
        <span class="groupRight">{{wageData.workEcon}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">高温补贴:</span>
        <span class="groupRight">{{wageData.workHighTem}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">加班费:</span>
        <span class="groupRight">{{wageData.workOt}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">带班费:</span>
        <span class="groupRight">{{wageData.workDb}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">出勤奖金:</span>
        <span class="groupRight">{{wageData.workDayBonus}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">应发合计:</span>
        <span class="groupRight">{{wageData.workWage}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">预支款:</span>
        <span class="groupRight">{{wageData.workAdvance}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">缺勤扣款:</span>
        <span class="groupRight">{{wageData.workMisDeduct}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">社保扣款:</span>
        <span class="groupRight">{{wageData.workSocialDeduct}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">个税:</span>
        <span class="groupRight">{{wageData.workPersonalTax}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">其他扣款:</span>
        <span class="groupRight">{{wageData.workOtherDeduct}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">实发工资:</span>
        <span class="groupRight">{{wageData.workRealWage}}元</span>
      </div>
      <div class="wagesDetalGroup">
        <span class="groupLeft">工资备注:</span>
        <span class="groupRight">{{wageData.desc}}</span>
      </div>
    </div>
    <bottomMenu :menuType="menuType"></bottomMenu>
  </div>
</template>

<script>
  import bottomMenu from './bottomMenu.vue'
  import {getSalarys} from '@/controller'
  export default {
    name: 'wages',
    data () {
      return {
        wageData: this.$route.query,
        menuType: 3,
      }
    },

    mounted() {
    },

    filters: {
    },

    methods:{
    },

    components: {
      'bottomMenu': bottomMenu
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .wagesBox {
    height: 100%;
    width: 100%;
  }

  .wagesTitle {
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
    letter-spacing:4px;
    margin-top: 20px;
  }

  .wagesMoney {
    text-align: center;
    color: #ff664d; 
    font-size: 18px; 
    font-weight: bold;
    margin-bottom: 10px;
  }

  .wagesDetalBox {
    border-top: 1px solid #ccc; 
    border-bottom: 1px solid #ccc;
    padding: 20px 20px 10px 20px;
    margin-bottom: 50px;
  }

  .wagesDetalGroup {
    display: flex;
    padding-bottom: 10px;
  }

  .groupLeft {
    flex: 1;
    text-align: left;
  }

  .groupRight {
    flex: 1;
    text-align: right;
  }
</style>
